<template>
  <!-- 联想建议组件 -->

  <div class="search-advice">
    <van-cell
      v-for="(item, i) in adcives"
      @click="$emit('search', item)"
      :key="i"
      icon="search"
    >
      <div slot="title" v-html="highlight(item)"></div>
    </van-cell>
  </div>
</template>

<script>
// 导入联想建议接口
import { getsearchAdvice } from "@/api/search";

// 导入lodash中的防抖函数debounce
import { debounce } from "lodash";
export default {
  // 组件名称
  name: "searchAdvice",
  // 组件参数 接收来自父组件的数据
  props: {
    values: {
      type: String,
      required: true,
    },
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      adcives: [], //存放获取到的数据
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    // 当values发生改变时会触发
    values: {
      // debounce 参数1：一个函数   参数2：延迟时间，毫秒
      // 返回值：防抖后的函数
      handler: debounce(function(val) {
        this.getAdcive(val);
      }, 300),
      // handler(val) {
      //   this.getAdcive(val);
      // },
      immediate: true, // 该回调将会再侦听开始前立即被调用
    },
  },
  // 组件方法
  methods: {
    async getAdcive(q) {
      try {
        const { data } = await getsearchAdvice(q);
        this.adcives = data.data.options;
      } catch (error) {
        this.$toast("数据获取失败，请稍后再试");
      }
    },

    // 将联想数据改为高亮展示
    highlight(text) {
      const highlightStr = `<span style='color:#3296fa'>${this.values}</span>`;
      // RegExp是正则表达式的构造函数
      // 参数1：匹配的字符串，并根据字符串创建正则对象
      // 参数2：匹配模式，要写到字符串中
      // 创建一个转译字符串中特殊字符的正则
      const transReg = /[.*+?|()\[\]{}\\]/g;
      const result = this.values.replace(transReg, "\\$&");
      const reg = new RegExp(result, "gi");
      return text.replace(reg, highlightStr);
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<style scoped lang="less"></style>
